<!--忘记密码-->
<template>
<div>

  <el-dialog  :visible.sync="dialogFormVisibleForgotPassword">
    <div class="forget">忘记密码</div>
    <el-form ref="form" :model="form" label-width="0px" label-position="left">
      <el-form-item >
        <el-input placeholder="请输入账号" v-model="form.nickName"></el-input>
      </el-form-item>
      <el-form-item >
        <el-input show-password placeholder="请输入新密码" v-model="form.password"></el-input>
      </el-form-item><el-form-item >
      <el-input show-password placeholder="请再次输入新密码" v-model="form.name"></el-input>
    </el-form-item><el-form-item >
      <el-input placeholder="请输入手机号" v-model="form.phoneNumber"></el-input>
    </el-form-item><el-form-item >
      <div class="codes">
        <el-input placeholder="请输入验证码" v-model="form.phoneCode"></el-input>
        <el-button class="code" type="primary" size="mini" @click="getCodes" :disabled="disabled">{{getCodeVlue}}</el-button>
      </div>
    </el-form-item>
      <el-form-item>
        <div class="codes">
          <el-button class="create" size="mini" type="primary" @click="onSubmit">确定更改密码</el-button>
        </div>
      </el-form-item>
    </el-form>
    <div class="footer">
      <span class="footerText" @click="goRegistered">立即注册</span>
      <span class="footerText" @click="goLogin">去登录</span>
    </div>
  </el-dialog>
</div>
</template>

<script>
import {getForgotPhoneCode ,getForgotInterFace} from '../api/userCenter-api'
export default {
name: "ForgotPassword",
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisibleForgotPassword: false,
            getCodeVlue: "获取验证码",
      disabled: false,
      num: 60,
      form: {
        nickName: '',
        password:'',
        phoneNumber:'',
        phoneCode:'',
      },
    };
  },
  methods: {
    onSubmit() {
          if(this.form.nickName===''||this.form.password===''||this.form.phoneNumber===''||this.form.phoneCode===''){
          this.$message({
              showClose: true,
              message: `请输入手机号/验证码`,
              type: "error",
            });
      }
      else{
   getForgotInterFace(this.form.nickName,this.form.password,this.form.phoneNumber,this.form.phoneCode).then(res=>{
         if(res.code===0){
           this.dialogFormVisibleForgotPassword=false
      this.$emit("fromForgotPassWord",true)

         }else{
              this.$message({
          message:res.msg,
          type: 'warning'
        });
         }
       })
      }
     
    },
    goLogin(){
      this.dialogFormVisibleForgotPassword=false
      this.$emit("fromForgotPassWord",true)
    },
    goRegistered(){
      this.dialogFormVisibleForgotPassword=false
      this.$emit('fromForgotGoRegistered',true)
    },
    // 获取忘记密码手机验证码
     getCodes(){
      //  动态效果
      
      // 请求验证码接口开始
      getForgotPhoneCode(this.form.nickName,this.form.phoneNumber).then(res=>{
       if(res.code===500){
           this.$message({
          message:res.msg,
          type: 'warning'
        });
       }else{
          this.$message({
          message:res.msg,
          type: 'success'
        });
          let a1 = setInterval(() => {
        this.num--;
        this.disabled = true;

        this.getCodeVlue = `${this.num}秒后重试`;
      }, 1000);
      setTimeout(() => {
        clearInterval(a1);
        this.getCodeVlue = `获取验证码`;
        this.disabled = false;
        this.num=60
      }, 60000);
       }
      })

    },
  },
  props:{
    isShowForgotDiaLog:Boolean
  },
  watch: {
    isShowForgotDiaLog(){
      this.dialogFormVisibleForgotPassword=true
      
    }
  },
  created () {
  }
}
</script>

<style scoped lang="less">
/deep/.el-dialog__header{
  padding:0;
}
/deep/.el-dialog{
  width:380px;
  height:402px;
  padding:20px 36px 24px 36px;
}
/deep/.el-dialog__body{
  padding:0;
}
.forget{
  width:100%;
  height:21px;
  text-align:center;
}
.codes{
  display:flex;
  justify-content: flex-start;
}
/deep/.code{
  margin-left:15px;
  width:105px;
  height:32px;
  line-height:-50px;
  margin-top:4px;
  margin-right:30px;
  font-size:14px;
  span{
    margin-top:0px;
  }
}
/deep/.el-button--primary {
  color: #FFF;
  background-color: #00cf8c;
  border-color: #00cf8c;
  &:hover{
    color:#fff;
    background-color:#23db9b ;
    border-color: #23db9b;
  }
  &:focus{
    color:#fff;
    background-color:#23db9b ;
    border-color: #23db9b;
  }
}
/deep/.el-input__inner{
  height:32px;
}
/deep/.create{
  width:100%;
  height:35px;
  font-size:15px;
}
/deep/.el-form-item{
  margin-bottom:15px;
}
.footer{
  display:flex;
  justify-content: space-between;
  margin-top:15px;
  color:#999;
  .footerText{
    &:hover{
      color:#00cf8c;
    }
  }
}
</style>